<template>
	<view class="pad-t10">
		<view class="block-box pad24">
			<view class="block-tit f-s28">
				到店使用
			</view>
			<view class="procudt-info mar-t20 flex">
				<u--image
					:showLoading="true" 
					:src="getImg('swiper-img')" 
					width="192rpx"
					height="144rpx"
					radius="12rpx"
				></u--image>
				<view class="h-144 pad-l20 flex-col ju-bt">
					<view class="info-tit">
						瓷肌美白 通透亮肤
					</view>
					<view class="info-num">
						x1
					</view>
					<view class="info-price">
						¥1980
					</view>
				</view>
			</view>
			<u-line margin="28rpx 0"></u-line>
			<view class="cell-box">
				<view class="flex-a ju-bt">
					<view class="cell-label">
						买家留言
					</view>
					<view class="cell-val" :class="{'val-tips': true}">
						选填
					</view>
				</view>
				<u-line margin="28rpx 0"></u-line>
				<view class="flex-a ju-bt">
					<view class="cell-label">
						商品金额
					</view>
					<view class="cell-val" :class="{'val-tips': false}">
						¥1980
					</view>
				</view>
				<u-line margin="28rpx 0"></u-line>
				<view class="cell-total  ">
					<text class="total-label">
						总计
					</text>
					<text class="total-price mar-l12">
						¥1980
					</text>
				</view>
			</view>
		</view>
		<view class="block-box mar-t20 pad24">
			<view class="block-tit f-s28">
				到店使用
			</view>
			<view class="pay-list">
				 <u-radio-group
				    v-model="selectPay"
				    placement="column"
					activeColor="#FF7171"
				>
					<view 
						class="pay-li mar-t20 flex-a ju-bt" 
						v-for="(item, index) in payList"
						:key="index"
						@click="selectPay = item.id"
					>
						<view class="pay-label flex-a">
							<u--image
								:showLoading="true" 
								:src="getImg(item.icon)" 
								width="40rpx"
								height="40rpx"
							></u--image>
							<text class="mar-l10" >{{ item.name }}</text>
						</view>
						  <u-radio
						      :name="item.id"
						    >
						    </u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="fot-box pad-b88 flex-a ju-bt">
			<view class="">
				<text class="fot-label">
					应付
				</text>
				<text class="fot-val mar-l10">
					¥1980.00
				</text>
			</view>
			<view class="fot-btn flex-center" @click="onNext">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payList: [
					{
						name: "微信支付",
						icon: "wechat-icon2",
						id: 1,
					},
					{
						name: "支付宝支付",
						icon: "alipay-icon",
						id: 2,
					},
				],
				selectPay: ""
			}
		},
		onLoad() {
			
		},
		methods: {
			onNext() {
				this.$goRouter("/pages/subscribe/pages/orderDetail")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fot-box{
		.fot-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
		.fot-val {
			font-family: MiSans, MiSans;
			font-weight: 400;
			font-size: 44rpx;
			color: #FF7171;
		}
		.fot-btn {
			width: 196rpx;
			height: 72rpx;
			background: #FF7171;
			border-radius: 54rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.block-box {
		.pay-list {
			.pay-label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.cell-box {
			.cell-total {
				text-align: right;
				.total-price {
					font-family: MiSans, MiSans;
					font-weight: 500;
					font-size: 44rpx;
					color: #FF7171;
				}
				.total-label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}
			.cell-val {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
			}
			.val-tips {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
			.cell-label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.procudt-info {
			.info-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
			}
			.info-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.info-price {
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 32rpx;
				color: #FF7171;
			}
		}
	}
</style>
<style>
	page {
		background: #F5F5F5;
	}
</style>
